<template>
	<div class="login">
		<!-- 顶部 -->
		<van-nav-bar
			title="注册"
			left-text="返回"
			left-arrow
			@click-left="onClickLeft"
		/>
		<!-- 头像 -->
		<van-uploader
			v-model="fileList"
			multiple
			:max-count="1"
			accept="image/png, image/jpeg"
		/>
		<!-- 表单 -->
		<van-form @submit="onSubmit">
			<van-field
				v-model="userName"
				name="userName"
				label="用户名"
				placeholder="用户名"
				:rules="[{ required: true, message: '请填写用户名' }]"
			/>
			<van-field
				v-model="password"
				type="password"
				name="password"
				label="密码"
				placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' }]"
			/>
			<van-field
				v-model="nickName"
				name="nickName"
				label="昵称"
				placeholder="请输入昵称"
				:rules="[{ required: true, message: '请填写昵称' }]"
			/>
			<van-field
				v-model="age"
				name="age"
				label="年龄"
				placeholder="请输入年龄"
				:rules="[{ required: true, message: '请输入年龄' }]"
			/>
			<van-field
				v-model="gender"
				name="gender"
				label="性别"
				placeholder="请输入性别"
				:rules="[{ required: true, message: '请输入性别' }]"
			/>
			<van-field
				v-model="birthday"
				name="birthday"
				label="生日"
				placeholder="请输入生日"
				:rules="[{ required: true, message: '请输入生日' }]"
			/>
			<van-field
				v-model="avatar"
				rows="2"
				autosize
				label="个人描述"
				type="textarea"
				maxlength="50"
				placeholder="请输入描述"
				show-word-limit
			/>

			<div style="margin: 16px">
				<van-button round block type="info" native-type="submit"
					>提交</van-button
				>
			</div>
		</van-form>
		<!-- 切换登录 -->
		<van-button id="qh" type="primary" size="mini" :to="{ name: 'Login' }"
			>俺有账户，要登录</van-button
		>
	</div>
</template>

<script>
import { Toast } from "vant";
import { registerAPL } from "../services/anth";
import { setToken } from "../utils/tools";

export default {
	data() {
		return {
			userName: "",
			password: "",
			nickName: "",
			birthday: "",
			age: "",
			gender: "",
			avatar: "",
			fileList: [
				// { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
				// Uploader 根据文件后缀来判断是否为图片文件
				// 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
				// { url: 'https://cloud-image', isImage: true },
			],
		};
	},
	methods: {
		//退回
		onClickLeft() {
			this.$router.go(-1);
		},
		//登录名与密码
		async onSubmit(values) {
			console.log(values);
			console.log(this.fileList);
			const res = await registerAPL(values);
			if (res.code == 1) {
				setToken(res.data);
				Toast.success({
					message: "注册成功",
				});
				//登录后跳转
				this.$router.replace({
					name: "User",
				});
			} else {
				Toast.fail({
					message: res.data,
				});
			}
		},
	},
};
</script>

<style lang="scss">
#qh {
	display: block;
	margin: 20px 0px 0 60vw;
}
.van-uploader__wrapper {
	margin-top: 20px;
	margin-left: 40vw;
}
</style>
